<script lang="ts" setup>
import { computed, PropType } from "vue";
import { isObject } from "../../utils/is";
import { cloneDeep } from "lodash-es";

type PositionType =
  | "top"
  | "tl"
  | "tr"
  | "bottom"
  | "bl"
  | "br"
  | "left"
  | "lt"
  | "lb"
  | "right"
  | "rt"
  | "rb";

const model = defineModel({ required: true });
const emits = defineEmits(["editTag"]);
const props = defineProps({
  editShow: {
    type: Boolean,
    default: false,
  },
  showNum: {
    type: Number,
    default: 2,
  },
  position: {
    type: String as PropType<PositionType>,
    default: "top",
  },
});

const tagData = computed<string[]>(() => {
  const value: any = cloneDeep(model.value || []);
  if (isObject(value)) {
    return Object.keys(value).map((key) => `${key} : ${value[key]}`);
  }
  return (model.value || []) as string[];
});

const isMore = computed(() => tagData.value.length > props.showNum);

const showData = computed(() => {
  if (isMore.value) {
    return tagData.value.slice(0, props.showNum);
  }
  return tagData.value;
});
</script>

<template>
  <ga-space wrap class="namespace-tags">
    <template v-if="showData.length > 0">
      <ga-tag v-for="(item, index) in showData" :key="index" class="namespace-tag">{{
        item
      }}</ga-tag>
    </template>
    <span v-else>-</span>
    <ga-tooltip :position="position" content-class="namespace-tag-tooltip">
      <template #content>
        <ga-space wrap>
          <ga-tag v-for="(item, index) in tagData" :key="index" class="namespace-tag">
            {{ item }}
          </ga-tag>
        </ga-space>
      </template>
      <ga-tag v-if="isMore" class="more namespace-tag"><icon-more /></ga-tag>
    </ga-tooltip>

    <ga-link v-if="editShow" @click="(e: Event) => emits('editTag',e )">
      <template #icon>
        <icon-edit />
      </template>
    </ga-link>
  </ga-space>
</template>

<style scoped lang="scss">
.namespace-tags {
  white-space: nowrap;
  // border: 1px solid #000;
  padding-top: 5px;
  .namespace-tag {
    border-radius: 10px;
    background-color: rgb(247, 249, 252);
  }
}
.more:focus {
  color: rgb(15, 94, 247);
}
.namespace-tag-tooltip {
  background-color: #ffffff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02),
    0 2px 4px 0 rgba(0, 0, 0, 0.02);
}
</style>
